<template>
  <mt-navbar title="上传付款凭证"> </mt-navbar>
  <view class="safety-150">
    <view class="forms">
      <uv-form ref="formRef" label-position="top" label-width="auto" :border-bottom="false" :model="modelForm" :rules="rules">
        <uv-form-item label="付款凭证：" prop="paymentVoucherUrl" required>
          <mt-image-upload v-model="modelForm.paymentVoucherUrl" oss-path="water-pay"></mt-image-upload>
        </uv-form-item>

        <uv-form-item label="付款说明：" prop="remark">
          <view class="w-full pt-24rpx">
            <uv-textarea v-model="modelForm.remark" auto-height maxlength="100" placeholder="请输入付款说明" border="none"></uv-textarea>
          </view>
        </uv-form-item>
      </uv-form>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="flex-1" @click="handleSubmit"> 提交 </mt-button>
    </view>
  </view>
</template>

<script setup>
import { waterBillPayApprovesubmitPayVoucherApp } from '@/api/common';
import { createGoldChannelOrder, createBondOrder } from '@/subMember/api/index.js';
import { activityaddServiceProviderSignUp } from '@/subActivity/api/index';

const orderType = ref();

const formRef = ref();
const modelForm = ref({
  orderId: '',
  paymentVoucherUrl: [],
  remark: '',
  orderAmount: 0
});
const rules = {
  paymentVoucherUrl: {
    type: 'array',
    required: true,
    message: '请上传付款凭证',
    trigger: ['change']
  }
};

function handleSubmit() {
  formRef.value
    .validate()
    .then(() => {
      const params = {
        orderId: modelForm.value.orderId,
        payVoucher: JSON.stringify(modelForm.value.paymentVoucherUrl),
        payRemark: modelForm.value.remark,
        paymentChannel: orderType.value === 'member' || orderType.value === 'bound' ? 3 : undefined,
        orderAmount: orderType.value === 'bound' ? modelForm.value.orderAmount : undefined
      };
      if (orderType.value === 'member') {
        // 创建渠道订单
        createGoldChannelOrder(params).then(() => {
          uni.showToast({
            icon: 'none',
            title: '操作成功',
            duration: 1000
          });
          setTimeout(() => {
            uni.navigateBack({ delta: 2 });
          }, 1000);
        });
      } else if (orderType.value === 'bound') {
        // 创建保证金订单
        createBondOrder(params).then(() => {
          uni.showToast({
            icon: 'none',
            title: '操作成功',
            duration: 1000
          });
          setTimeout(() => {
            uni.navigateBack({ delta: 2 });
          }, 1000);
        });
      } else if (orderType.value === 'activity') {
        // 创建活动订单
        if (activityPay.value) {
          activityaddServiceProviderSignUp({
            ...activityPay.value,
            payVoucher: modelForm.value.paymentVoucherUrl,
            payRemark: modelForm.value.remark
          }).then(() => {
            uni.redirectTo({
              url: '/subActivity/pages/signSuccess?delta=3'
            });
          });
        }
      } else {
        // 加入产品
        waterBillPayApprovesubmitPayVoucherApp(params).then(() => {
          uni.showToast({
            icon: 'none',
            title: '操作成功',
            duration: 1000
          });
          setTimeout(() => {
            uni.navigateBack({ delta: 2 });
          }, 1000);
        });
      }
    })
    .catch((err) => {});
}

const activityPay = ref(null);
onLoad((options) => {
  modelForm.value.orderId = options?.orderId || '';
  orderType.value = options.type;
  modelForm.value.orderAmount = options.orderAmount * 1000;
  if (options.type === 'activity') {
    const storage = uni.getStorageSync('activityPay');
    activityPay.value = storage;
  }
});
</script>

<style lang="scss" scoped>
.forms {
  padding-top: 16rpx;
  :deep(.uv-textarea) {
    background: #f7f7f7 !important;
    .uni-textarea-wrapper {
      min-height: 100rpx;
    }
  }
  :deep(.uv-form) {
    .uv-form-item {
      font-size: 28rpx;
      margin-bottom: 16rpx;
      background-color: #ffffff;
      .uv-form-item__body {
        padding: 30rpx 32rpx;
      }
      .uv-form-item__body__left__content__label {
        font-size: 28rpx;
        color: #727687;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
